import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Animated } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/FontAwesome';

/**
 * FooterComponent 组件用于显示页面的底部导航和版权信息。
 * 
 * @returns {JSX.Element} - 渲染的底部组件。
 * 
 * @注意事项
 * - 确保在使用该组件的页面中已经正确配置了导航，否则导航链接可能无法正常工作。
 * - 社交图标和导航链接有动画效果，若需修改动画，可调整 `Animated` 相关代码。
 */
const FooterComponent = () => {
    const navigation = useNavigation();
    const [isNavigationReady, setIsNavigationReady] = useState(false);

    // 社交图标动画（独立于导航状态）
    const [socialScaleValue] = useState(new Animated.Value(1));

    // 导航链接动画（导航就绪后初始化）
    const [navScaleValue, setNavScaleValue] = useState(null);

    // 法律链接动画（导航就绪后初始化）
    const [legalScaleValue, setLegalScaleValue] = useState(null);

    // 初始化导航相关动画
    useEffect(() => {
        if (isNavigationReady) {
            if (!navScaleValue) setNavScaleValue(new Animated.Value(1));
            if (!legalScaleValue) setLegalScaleValue(new Animated.Value(1));
        }
    }, [isNavigationReady, navScaleValue, legalScaleValue]);

    // 社交图标动画处理
    const handleSocialPressIn = () => {
        Animated.spring(socialScaleValue, {
            toValue: 0.95,
            useNativeDriver: true,
        }).start();
    };

    const handleSocialPressOut = () => {
        Animated.spring(socialScaleValue, {
            toValue: 1,
            useNativeDriver: true,
        }).start();
    };

    // 导航链接动画处理
    const handleNavPressIn = () => {
        if (navScaleValue) {
            Animated.spring(navScaleValue, {
                toValue: 0.95,
                useNativeDriver: true,
            }).start();
        }
    };

    const handleNavPressOut = () => {
        if (navScaleValue) {
            Animated.spring(navScaleValue, {
                toValue: 1,
                useNativeDriver: true,
            }).start();
        }
    };

    // 法律链接动画处理
    const handleLegalPressIn = () => {
        if (legalScaleValue) {
            Animated.spring(legalScaleValue, {
                toValue: 0.95,
                useNativeDriver: true,
            }).start();
        }
    };

    const handleLegalPressOut = () => {
        if (legalScaleValue) {
            Animated.spring(legalScaleValue, {
                toValue: 1,
                useNativeDriver: true,
            }).start();
        }
    };

    // 监听导航状态
    useEffect(() => {
        if (navigation.getState()) {
            setIsNavigationReady(true);
        }
        const unsubscribe = navigation.addListener('state', () => {
            setIsNavigationReady(true);
        });
        return unsubscribe;
    }, [navigation]);

    // 安全导航函数
    const safeNavigate = (screenName) => {
        if (navigation.isReady()) {
            navigation.navigate(screenName);
        }
    };

    // 社交图标组件
    // eslint-disable-next-line react/no-unstable-nested-components
    const SocialIcon = ({ icon }) => (
        <TouchableOpacity
            style={styles.socialIconContainer}
            onPressIn={handleSocialPressIn}
            onPressOut={handleSocialPressOut}
        >
            <Animated.View style={{ transform: [{ scale: socialScaleValue }] }}>
                <Icon name={icon} size={18} color="#4B5563" />
            </Animated.View>
        </TouchableOpacity>
    );

    return (
        <View style={styles.footerContainer}>
            {/* 装饰性顶部线条 */}
            <View style={styles.decorativeLine} />

            <View style={styles.footerTop}>
                <View style={styles.footerLogoSection}>
                    <View style={styles.logoWrapper}>
                        <Icon name="comment-o" size={22} color="#4F46E5" />
                        <Text style={styles.footerLogoText}>ChatGPT指令大全</Text>
                    </View>
                    <Text style={styles.logoSubtitle}>
                        提升AI对话效率的最佳实践指南
                    </Text>
                </View>

                {/* 仅在导航就绪且动画初始化后渲染导航链接 */}
                {isNavigationReady && navScaleValue && (
                    <View style={styles.footerLinksContainer}>
                        <View style={styles.footerLinkGroup}>
                            <Text style={styles.footerLinkGroupTitle}>快速导航</Text>
                            <TouchableOpacity
                                onPress={() => safeNavigate('Home')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    首页
                                </Animated.Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => safeNavigate('Commands')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    指令大全
                                </Animated.Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => safeNavigate('Examples')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    使用示例
                                </Animated.Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => safeNavigate('About')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    关于我们
                                </Animated.Text>
                            </TouchableOpacity>
                        </View>

                        <View style={styles.footerLinkGroup}>
                            <Text style={styles.footerLinkGroupTitle}>资源中心</Text>
                            <TouchableOpacity
                                onPress={() => safeNavigate('Tutorials')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    教程
                                </Animated.Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => safeNavigate('API')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    API文档
                                </Animated.Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => safeNavigate('Community')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    社区
                                </Animated.Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => safeNavigate('Feedback')}
                                style={styles.linkTouchable}
                                onPressIn={handleNavPressIn}
                                onPressOut={handleNavPressOut}
                            >
                                <Animated.Text
                                    style={[styles.footerLinkItem, { transform: [{ scale: navScaleValue }] }]}
                                >
                                    反馈建议
                                </Animated.Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                )}
            </View>

            <View style={styles.footerBottom}>
                <View style={styles.footerSocialLinks}>
                    <SocialIcon icon="github" />
                    <SocialIcon icon="twitter" />
                    <SocialIcon icon="discord" />
                    <SocialIcon icon="envelope-o" />
                </View>

                <View style={styles.copyrightSection}>
                    <Text style={styles.footerCopyright}>
                        © 2025 ChatGPT指令大全 版权所有
                    </Text>

                    {/* 法律链接使用safeNavigate并添加额外的导航就绪检查 */}
                    {isNavigationReady && legalScaleValue && (
                        <View style={styles.legalLinks}>
                            <TouchableOpacity
                                onPress={() => safeNavigate('PrivacyPolicy')}
                                style={styles.legalLinkTouchable}
                                onPressIn={handleLegalPressIn}
                                onPressOut={handleLegalPressOut}
                            >
                                <Animated.Text
                                    style={[styles.legalLinkText, { transform: [{ scale: legalScaleValue }] }]}
                                >
                                    隐私政策
                                </Animated.Text>
                            </TouchableOpacity>
                            <Text style={styles.separator}>|</Text>
                            <TouchableOpacity
                                onPress={() => safeNavigate('TermsOfService')}
                                style={styles.legalLinkTouchable}
                                onPressIn={handleLegalPressIn}
                                onPressOut={handleLegalPressOut}
                            >
                                <Animated.Text
                                    style={[styles.legalLinkText, { transform: [{ scale: legalScaleValue }] }]}
                                >
                                    使用条款
                                </Animated.Text>
                            </TouchableOpacity>
                            <Text style={styles.separator}>|</Text>
                            <TouchableOpacity
                                onPress={() => safeNavigate('ContactUs')}
                                style={styles.legalLinkTouchable}
                                onPressIn={handleLegalPressIn}
                                onPressOut={handleLegalPressOut}
                            >
                                <Animated.Text
                                    style={[styles.legalLinkText, { transform: [{ scale: legalScaleValue }] }]}
                                >
                                    联系我们
                                </Animated.Text>
                            </TouchableOpacity>
                        </View>
                    )}
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    footerContainer: {
        backgroundColor: '#F9FAFB',
        paddingHorizontal: 20,
        paddingTop: 25,
        paddingBottom: 15,
        borderTopWidth: 1,
        borderTopColor: '#F0F0F0',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: -2 },
        shadowOpacity: 0.03,
        shadowRadius: 8,
    },

    // 装饰性线条
    decorativeLine: {
        height: 3,
        width: 40,
        backgroundColor: '#4F46E5',
        borderRadius: 2,
        marginBottom: 20,
        alignSelf: 'flex-start',
    },

    footerTop: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 25,
        flexWrap: 'wrap',
    },

    footerLogoSection: {
        marginRight: 30,
        minWidth: 180,
    },

    logoWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 8,
    },

    footerLogoText: {
        fontSize: 19,
        fontWeight: '600',
        color: '#1F2937',
        marginLeft: 8,
        letterSpacing: 0.3,
    },

    logoSubtitle: {
        fontSize: 12,
        color: '#9CA3AF',
        lineHeight: 16,
        maxWidth: 200,
    },

    footerLinksContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        flex: 1,
        minWidth: 300,
    },

    footerLinkGroup: {
        marginRight: 20,
        marginBottom: 15,
    },

    footerLinkGroupTitle: {
        fontSize: 14,
        fontWeight: '600',
        color: '#4B5563',
        marginBottom: 12,
        paddingLeft: 2,
    },

    linkTouchable: {
        borderRadius: 4,
        paddingVertical: 3,
        paddingHorizontal: 2,
        marginBottom: 4,
    },

    footerLinkItem: {
        fontSize: 13,
        color: '#6B7280',
        paddingVertical: 2,
    },

    footerBottom: {
        borderTopWidth: 1,
        borderTopColor: '#F0F0F0',
        paddingTop: 20,
        alignItems: 'center',
    },

    footerSocialLinks: {
        flexDirection: 'row',
        marginBottom: 18,
    },

    socialIconContainer: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: '#F0F0F0',
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: 8,
    },

    copyrightSection: {
        alignItems: 'center',
    },

    footerCopyright: {
        fontSize: 12,
        color: '#9CA3AF',
        marginBottom: 10,
    },

    legalLinks: {
        flexDirection: 'row',
        alignItems: 'center',
    },

    legalLinkText: {
        fontSize: 11,
        color: '#8D949E',
        marginHorizontal: 6,
    },

    separator: {
        fontSize: 10,
        color: '#E0E0E0',
    },

    // 新增：法律链接的触摸样式
    legalLinkTouchable: {
        borderRadius: 4,
        paddingHorizontal: 6,
        paddingVertical: 2,
    },
});

export default FooterComponent;